<template>
<nav class="page-header-nav">
  <h1><img src="@/assets/logo.svg" class="logo"><span>图一波后台管理系统</span></h1>
  <ul class="nav-right">
    <li>欢迎您，
      <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          <span>{{username}}</span><i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">个人中心</el-dropdown-item>
          <el-dropdown-item command="b">修改密码</el-dropdown-item>
          <el-dropdown-item command="d" disabled>切换账号</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </li>
    <li>
      <!-- <router-link to="/login" class="nav-link" @click="loginOut">退出</router-link> -->
      <div class="loginOut" @click="loginOut">退出</div>
    </li>
  </ul>
  <ChangePassword :showChangePasswordModal="showChangePasswordModal" :userInfo="userInfo"></ChangePassword>
</nav>
</template>

<script>
import { mapState } from "vuex";
import ChangePassword from "@/components/global/changePassword.vue";
export default {
  name: 'PageHeaderNav',
  components: { ChangePassword },
  data(){
    return {
      username:'',
      showChangePasswordModal:false,
      userInfo:''
    }
  },
  computed: {
    ...mapState("user", {
      state: state => state
    })
  },
  mounted(){
    this.userInfo=this.state;
    this.username=this.userInfo.name
  },
  methods: {
    closeModal(){
      this.showChangePasswordModal=false
    },
    handleCommand(command) {
      if(command=="b"){
        this.showChangePasswordModal=true
      }
    },
    async loginOut(){
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.page-header-nav {
    height: 50px;
    display: flex;
    align-items: center;
    h1 {
        display: flex;
        align-items: center;
        font-size: 20px;
        .logo {
            margin-right: 10px;
            height: 50px;
        }
        > span {
            color: @color-primary;
            font-weight: 600;
        }
    }
    .nav-right {
        margin-left: auto;
        list-style: none;
        display: flex;
        align-items: center;
        > li {
            margin-left: 15px;
            .el-dropdown-link {
                cursor: pointer;
            }
            .nav-link {
                display: block;
                height: 50px;
                line-height: 50px;
                color: @color-primary;
                padding: 0 15px;
                text-decoration: none;
                transition: all 0.2s cubic-bezier(.645,.045,.355,1);
                &:hover {
                    background-color: fade(@color-primary,10%);
                }
                &:active {
                    background-color: fade(@color-primary,20%);
                }
            }
        }
    }
}
</style>

<style scoped>
.loginOut{
  cursor: pointer;
}
</style>